import React,{Component, Fragment} from 'react'
import MyCom2 from './my_com2'

class myCom1 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: 'test',
      list: []
    }
  }
  render() {
    return (
      <Fragment>
        <MyCom2 />
        <div>
          <input 
            value={this.state.inputValue}
            onChange={this.handleChange.bind(this)}
          />
          <button onClick={this.handleAdd.bind(this)}>提交</button>
        </div>
        <ul>
          {
            this.state.list.map((item, index) => {
              return (
                <li
                  key={index}
                  onClick={this.handleDelete.bind(this, index)}
                >
                  {item}
                </li>
              )
            })
          }
        </ul>
      </Fragment>
    )
  }
  handleChange(e) {
    this.setState({
      inputValue: e.target.value
    })
  }
  handleAdd() {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
    })
  }
  handleDelete(index) {
    const newList = [...this.state.list];
    newList.splice(index, 1);

    this.setState({
      list:newList
    })
  }
}

export default myCom1